<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Responsive Web UI Kit &amp; Dashboard Template based on Bootstrap">
    <meta name="author" content="AdminKit">
    <meta name="keywords" content="adminkit, bootstrap, web ui kit, dashboard template, admin template">

    <link rel="shortcut icon" href="${pageContext.request.contextPath}/img/icons/icon-48x48.png"/>

    <title>部门管理</title>

    <link href="${pageContext.request.contextPath}/css/app.css" rel="stylesheet">
    <style type="text/css">
        a{
            text-decoration: none;
        }
        tr>td{
            color: black;
        }
    </style>
</head>

<body>
<div class="wrapper">
    <%@include file="../icn/sidebar.jsp" %>
    <div class="main">
        <%@include file="../icn/head.jsp" %>
        <main class="content">
            <div class="container-fluid p-0">
                <div class="row">
                    <div class="col-12 col-lg-12 col-xxl-12 d-flex">
                        <div class="card flex-fill">
                            <div class="card-header">
                                <h1 class="card-title mb-0" style="font-weight: bold;font-size: 25px">部门列表</h1>
                            </div>
                            <br>
                            <br>
                            <br>
                            <div class="row" style="margin-left: 10px">
                                <button class="btn btn-success " style="width: 80px;height: 40px">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                         fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                         stroke-linejoin="round" class="feather feather-edit align-middle mr-2">
                                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                                    </svg>
                                    <a href="deptEdit" style="color: white;text-decoration: none">新增</a></button>
                                <form action="${pageContext.request.contextPath}/system/dept/deptList" method="get">
                                    <div class="col-lg-3">
                                        <div class="input-group">
                                            <input type="text" name="name" class="form-control" placeholder="请输入部门" style="width: 800px;height: 40px">
                                            <span class="input-group-btn">
                                     <button class="btn btn-success" type="submit" style="height: 40px">查询</button>
                                     </span>
                                        </div><!-- /input-group -->
                                    </div><!-- /.col-lg-6 -->
                                </form>
                            </div>
                            <table class="table table-hover my-0 col-12" style="text-align: center">
                                <thead>
                                <tr>
                                    <th class="d-none d-xl-table-cell">部门名</th>
                                    <th class="d-none d-xl-table-cell">图标</th>
                                    <th class="d-none d-xl-table-cell">别名</th>
                                    <th class="d-none d-xl-table-cell">创建时间</th>
                                    <th class="d-none d-xl-table-cell">修改时间</th>
                                    <th class="d-none d-xl-table-cell">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${deptPage.list}" var="d">
                                    <tr>
                                        <td class="d-none d-xl-table-cell">${d.name}</td>
                                        <td class="d-none d-xl-table-cell"><img src="${d.icon}" style="height: 25px;width: 25px"></td>
                                        <td class="d-none d-xl-table-cell">${d.otherName}</td>
                                        <td class="d-none d-xl-table-cell"><fmt:formatDate value="${d.createTime}" pattern="yyyy-MM-dd HH:hh:ss"/></td>
                                        <td class="d-none d-xl-table-cell"><fmt:formatDate value="${d.updateTime}" pattern="yyyy-MM-dd HH:hh:ss"/></td>
                                        <td>
                                            <a href="${pageContext.request.contextPath}/system/dept/deptEdit/${d.id}">
                                                <button class="btn btn-primary" style="width: 35px">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                         viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                         stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                         class="feather feather-edit-2 align-middle mr-2">
                                                        <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
                                                    </svg>
                                                </button>
                                            </a>
                                            <a href="${pageContext.request.contextPath}/system/dept/deptList/${d.id}">
                                                <button class="btn btn-danger"><i class="fas fa-times"></i></button>
                                            </a>
                                        </td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                            <ul class="pagination pg-primary" style="margin-left: 10px">
                                <c:if test="${deptPage.page!=1}">
                                <li class="page-item">
                                    <a class="page-link" href="?page=${deptPage.page-1}" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                        <span class="sr-only">Previous</span>
                                    </a>
                                </li>
                                </c:if>

                                <c:forEach begin="1" end="${deptPage.pageSize}" var="i">
                                <li class="page-item ${deptPage.page==i?'active':''}">
                                    <a class="page-link" href="?page=${i}" >${i}</a></li>
                                </c:forEach>

                                <c:if test="${deptPage.page!=deptPage.pageSize}">
                                <li class="page-item">
                                    <a class="page-link" href="?page=${deptPage.page+1}" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                        <span class="sr-only">Next</span>
                                    </a>
                                </li>
                                </c:if>
                                <span style="    position: relative;
    top: 2px;
    left: 20px;
    font-size: 17px">
                                        共：${deptPage.count}条
                                    </span>
                        </div>
                    </div>
                </div>
            </div>
        </main>
<%--        <footer class="footer">--%>
<%--            <div class="container-fluid">--%>
<%--                <div class="row text-muted">--%>
<%--                    <div class="col-6 text-left">--%>
<%--                        <p class="mb-0">--%>
<%--                            <a href="index.jsp" class="text-muted"><strong>AdminKit Demo</strong></a> &copy;--%>
<%--                        </p>--%>
<%--                    </div>--%>
<%--                    <div class="col-6 text-right">--%>
<%--                        <ul class="list-inline">--%>
<%--                            <li class="list-inline-item">--%>
<%--                                <a class="text-muted" href="#">Support</a>--%>
<%--                            </li>--%>
<%--                            <li class="list-inline-item">--%>
<%--                                <a class="text-muted" href="#">Help Center</a>--%>
<%--                            </li>--%>
<%--                            <li class="list-inline-item">--%>
<%--                                <a class="text-muted" href="#">Privacy</a>--%>
<%--                            </li>--%>
<%--                            <li class="list-inline-item">--%>
<%--                                <a class="text-muted" href="#">Terms</a>--%>
<%--                            </li>--%>
<%--                        </ul>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--        </footer>--%>
    </div>
</div>

</main>


<script src="${pageContext.request.contextPath}/js/vendor.js"></script>
<script src="${pageContext.request.contextPath}/js/app.js"></script>

<<%--script>
	$(function () {
		var ctx = document.getElementById('chartjs-dashboard-line').getContext("2d");
		var gradient = ctx.createLinearGradient(0, 0, 0, 225);
		gradient.addColorStop(0, 'rgba(215, 227, 244, 1)');
		gradient.addColorStop(1, 'rgba(215, 227, 244, 0)');
		// Line chart
		new Chart(document.getElementById("chartjs-dashboard-line"), {
			type: 'line',
			data: {
				labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
				datasets: [{
					label: "Sales ($)",
					fill: true,
					backgroundColor: gradient,
					borderColor: window.theme.primary,
					data: [
						2115,
						1562,
						1584,
						1892,
						1587,
						1923,
						2566,
						2448,
						2805,
						3438,
						2917,
						3327
					]
				}]
			},
			options: {
				maintainAspectRatio: false,
				legend: {
					display: false
				},
				tooltips: {
					intersect: false
				},
				hover: {
					intersect: true
				},
				plugins: {
					filler: {
						propagate: false
					}
				},
				scales: {
					xAxes: [{
						reverse: true,
						gridLines: {
							color: "rgba(0,0,0,0.0)"
						}
					}],
					yAxes: [{
						ticks: {
							stepSize: 1000
						},
						display: true,
						borderDash: [3, 3],
						gridLines: {
							color: "rgba(0,0,0,0.0)"
						}
					}]
				}
			}
		});
	});
</script>
<script>
	$(function () {
		// Pie chart
		new Chart(document.getElementById("chartjs-dashboard-pie"), {
			type: 'pie',
			data: {
				labels: ["Chrome", "Firefox", "IE"],
				datasets: [{
					data: [4306, 3801, 1689],
					backgroundColor: [
						window.theme.primary,
						window.theme.warning,
						window.theme.danger
					],
					borderWidth: 5
				}]
			},
			options: {
				responsive: !window.MSInputMethodContext,
				maintainAspectRatio: false,
				legend: {
					display: false
				},
				cutoutPercentage: 75
			}
		});
	});
</script>
<script>
	$(function () {
		// Bar chart
		new Chart(document.getElementById("chartjs-dashboard-bar"), {
			type: 'bar',
			data: {
				labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
				datasets: [{
					label: "This year",
					backgroundColor: window.theme.primary,
					borderColor: window.theme.primary,
					hoverBackgroundColor: window.theme.primary,
					hoverBorderColor: window.theme.primary,
					data: [54, 67, 41, 55, 62, 45, 55, 73, 60, 76, 48, 79],
					barPercentage: .75,
					categoryPercentage: .5
				}]
			},
			options: {
				maintainAspectRatio: false,
				legend: {
					display: false
				},
				scales: {
					yAxes: [{
						gridLines: {
							display: false
						},
						stacked: false,
						ticks: {
							stepSize: 20
						}
					}],
					xAxes: [{
						stacked: false,
						gridLines: {
							color: "transparent"
						}
					}]
				}
			}
		});
	});
</script>
<script>
	$(function () {
		$("#world_map").vectorMap({
			map: "world_mill",
			normalizeFunction: "polynomial",
			hoverOpacity: .7,
			hoverColor: false,
			regionStyle: {
				initial: {
					fill: "#e3eaef"
				}
			},
			markerStyle: {
				initial: {
					"r": 9,
					"fill": window.theme.primary,
					"fill-opacity": .95,
					"stroke": "#fff",
					"stroke-width": 7,
					"stroke-opacity": .4
				},
				hover: {
					"stroke": "#fff",
					"fill-opacity": 1,
					"stroke-width": 1.5
				}
			},
			backgroundColor: "transparent",
			zoomOnScroll: false,
			markers: [{
				latLng: [31.230391, 121.473701],
				name: "Shanghai"
			},
				{
					latLng: [28.704060, 77.102493],
					name: "Delhi"
				},
				{
					latLng: [6.524379, 3.379206],
					name: "Lagos"
				},
				{
					latLng: [35.689487, 139.691711],
					name: "Tokyo"
				},
				{
					latLng: [23.129110, 113.264381],
					name: "Guangzhou"
				},
				{
					latLng: [40.7127837, -74.0059413],
					name: "New York"
				},
				{
					latLng: [34.052235, -118.243683],
					name: "Los Angeles"
				},
				{
					latLng: [41.878113, -87.629799],
					name: "Chicago"
				},
				{
					latLng: [51.507351, -0.127758],
					name: "London"
				},
				{
					latLng: [40.416775, -3.703790],
					name: "Madrid"
				}
			]
		});
		setTimeout(function () {
			$(window).trigger('resize');
		}, 250)
	});
</script>
<script>
	$(function () {
		$('#datetimepicker-dashboard').datetimepicker({
			inline: true,
			sideBySide: false,
			format: 'L'
		});
	});
</script>--%>

</body>

</html>